<template>
  <div class="wb-form-item">
    <div v-for="(item_, index) in formList" :key="index">
      <div v-if="item_.type && item_.type == 'radio'" :style="getFStyle(item_, index)" class="margin-top-30">
        <h4 v-html="getTitle(item_, index)"></h4>
        <van-field :name="item_.tableKey" @click="onClick(item_)" :border="false">
          <van-radio-group v-model="fValues[item_.tableKey]" @change="onChangeRadio">
            <van-radio v-for="(option, oindex) in item_.options" :key="'option_' + oindex" :name="option">{{option}}</van-radio>
          </van-radio-group>
        </van-field>
      </div>
      <div v-if="item_.type && item_.type == 'checkbox'" :style="getFStyle(item_, index)" class="margin-top-30">
        <h4 v-html="getTitle(item_, index)"></h4>
        <van-field :name="item_.tableKey" :border="false">
          <van-checkbox-group v-model="fValues[item_.tableKey]" :max="item_.max" @change="onChangeMerge">
            <van-checkbox shape="square" v-for="(option, oindex) in item_.options" :key="'option_' + oindex" :name="option">{{option}}</van-checkbox>
          </van-checkbox-group>
        </van-field>
        <div v-if="item_.other">
          <van-field type="text" v-model="fValues[item_.other.tableKey]" :size="item_.length" :name="item_.other.tableKey" :placeholder="item_.other.placeholder" :border="false"/>
        </div>
      </div>
      <div v-if="item_.type && item_.type == 'dropdown'" :style="getFStyle(item_, index)" class="margin-top-30">
        <h4 v-html="getTitle(item_, index)"></h4>
        <div :name="item_.tableKey" :border="false">
          <van-dropdown-menu @change="onChangeMerge">
            <van-dropdown-item v-model="fValues[item_.tableKey]" :options="getDropdownOptions(item_.options)" />
          </van-dropdown-menu>
        </div>
      </div>
      <div v-if="item_.type && item_.type == 'address'" :style="getFStyle(item_, index)" class="margin-top-30">
        <h4 v-html="getTitle(item_, index)"></h4>
        <div :name="item_.tableKey" :border="false">
          <van-cell is-link @click="onShowPopup" v-model="fValues[item_.tableKey]"></van-cell>
          <van-popup v-model:show="isShowArea" position="bottom" :style="{ height: '50%' }">
            <van-area :area-list="areaList" ref="myArea" @change="onChangeArea" @confirm="onConfirm" @cancel="onCancel"/>
          </van-popup>
        </div>
      </div>
      <div v-if="item_.type && item_.type == 'input'" :style="getFStyle(item_, index)" class="margin-top-30">
        <h4 v-html="getTitle(item_, index)"></h4>
        <van-field :type="item_.inputType" v-model="fValues[item_.tableKey]" :maxlength="item_.length" :required="item_.isNeed" :name="item_.tableKey" :placeholder="item_.placeholder" :border="false"/>
      </div>
      <div v-else-if="item_.lists">
        <wb-form-item @change="onChangeMerge" :fLists="item_.lists" :formValues="formValues" :pIndex="pIndex+1"></wb-form-item>
      </div>
    </div>
  </div>
</template>

<script>
import AreaList from '@/components/form/js/area'
import { ref } from 'vue'

export default {
  name: "WbFormItem",
  props: ['fLists', 'formValues', 'pIndex'],
  created(){
  },
  setup () {
    return {
      formList_: _.cloneDeep(this.fLists),
      fValues_: _.cloneDeep(this.formValues),
      isShowArea: ref(false),
      areaList: AreaList,
    }
  },
  computed: {
    formList: {
      get(){
        return this.formList_;
      },
      set(list){
        this.formList_ = list;
      }
    },
    fValues: {
      get(){
        return this.fValues_;
      },
      set(val){
        this.fValues_ = val;
        _.merge(this.formValues, val);
      }
    }
  },
  mounted(){
  },
  methods: {
    getFStyle(){
      return {
      }
    },
    getTitle(item_, index){
      let title = '';
      if(this.pIndex > 0){
        title = this.pIndex + '.('  + (index+1) + ') '+ item_.name;
      }else{
        title = (index+1) + '. ' + item_.name;
      }

      if(item_.isNeed){
        title += '<span style="color:#666">(*必填)</span>'
      }else{
        title += '<span style="color:#666">(可选填)</span>'
      }
      if(item_.type == "checkbox"){
        title += ' <span style="color:#666">(最多可选' + item_.max + ')</span>'
        if(item_.other){
          title += ' <span style="color:#666">(字数限制为' + item_.other.length + '个)</span>'
        }
      }
      return title;
    },
    getDropdownOptions(options){
      let options_ = [];
      _.forEach(options, (option) => {
        options_.push({ text: option, value: option });
      })
      return options_;
    },
    onClick(item_){
      let index = item_.options.indexOf(this.currentValue);
      if(index != -1){
        let key = 'lists_' + index;
        let list = _.cloneDeep(this.fLists);
        if(item_[key]){
          // _.forEach(this.fLists, (item) => {
          //   if(item_.id == item.id){
              _.forEach(item_[key], (ite) => {
                list.push(ite);
            //   })
            // }
          })
          this.formList = list;
        }
      }
    },
    onChangeRadio(value){
      this.currentValue = value;
      this.onChangeMerge();
    },
    onShowPopup() {
      this.isShowArea = true;
    },
    //value=0改变省，1改变市，2改变区
    //, arr, index
    onChangeArea(picker){
      let arr = picker.getValues();
      this.setAreaModel(arr);
    },
    //确定选择城市
    onConfirm(arr){
      this.isShowArea = false//关闭弹框
      this.setAreaModel(arr);
    },
    setAreaModel(arr){
      let areaName = '';
      for (var i = 0; i < arr.length; i++) {
        areaName = areaName + ( i == 0 ? '' : '/') + arr[i].name
      }
      this.fValues['address'] = areaName;
      this.onChangeMerge();
    },
    onChangeMerge(){
      _.merge(this.formValues, this.fValues);
    },
    //取消选中城市
    onCancel(){
      this.isShowArea = false;
      this.$refs.myArea[0].reset();// 重置城市列表
    }
  },
};
</script>

<style lang="scss">
.wb-form-item {
  width: inherit;
  height: inherit;

  // .van-field__label{
  //   width: 100%;
  // }
  .van-cell{
    padding: 0.1rem 0.04rem;
    font-size: inherit;
  }
  .van-radio{
    margin-top: 0.1rem;
  }
  .van-checkbox{
    margin-top: 0.1rem;
  }
  .van-dropdown-item__option{
    text-align: center;
  }
  .van-dropdown-menu{
    width: 100%;
    height: 0.8rem;
    border: none;
    outline: none;
  }
  .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
    border: none;
  }
  h4{
    text-align: left;
    margin-bottom: 0.1rem;
    font-size: inherit;
  }
  .van-radio__label{
    font-size: inherit;
  }
}
</style>
